<template>
  <div class="history-block">
    <div
      ref="cover"
      @click="toAnimeMain(data.id, data.ep)"
      class="cover-contain"
      :style="`width:${elWidth}px;`"
    >
      <BaseImg :src="data.cover" :lazy="true" />
    </div>
    <div class="r-txt">
      <h4 @click="toAnimeMain(data.id, data.ep)">{{ data.title }}</h4>
      <div class="t-info">
        <span>观看至{{ data.episodes }}集</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onActivated, nextTick } from 'vue'

import BaseImg from '../Global/BaseImg.vue'

import { toAnimeMain } from '../../router/jump'

export default {
  name: 'HistoryBlock',
  components: {
    BaseImg
  },
  props: {
    data: {
      default: {}
    }
  },
  setup() {
    // cover 封面元素
    const cover = ref()
    // cover 封面元素宽度
    const elWidth = ref('')

    onActivated(() => {
      try {
        elWidth.value = cover.value.clientHeight * 1.6
      } catch {
        console.log('not get el')
      }
    })
    nextTick(() => {
      try {
        elWidth.value = cover.value.clientHeight * 1.6
      } catch {
        console.log('error')
      }
    })

    return {
      cover,
      elWidth,
      toAnimeMain
    }
  }
}
</script>

<style lang="scss" scoped>
.history-block {
  display: flex;
  width: 100%;
  height: 100%;
}
.cover-contain {
  height: 100%;
  margin-right: 30px;
  border-radius: 5px;
  overflow: hidden;
}
.r-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0;
  box-sizing: border-box;
  border-bottom: 1px solid $font_unactive;
  h4 {
    cursor: pointer;
    color: $font;
    transition: all 0.25s;
    &:hover {
      transition: all 0.25s;
      color: $primary;
    }
  }
  .t-info {
    margin-bottom: 6px;
    color: $font_unactive;
    font-size: 12px;
  }
}
</style>
